<div class="page-header">
  <h1>Details for the topic </strong>{{topic}}</strong></h1>
</div>

<ol class="breadcrumb">
  <li><a href="#/">Topic Details</a></li>
  <li class="active">{{topic}}</li>
</ol>

<div class="alert alert-info" ng-show="loading">
  Loading ...
</div>

<div ng-hide="loading">
  <h2>Active Consumers</h2>

  <table class="table">
	<thead>
      <tr>
		<th>name</th>
      </tr>
	</thead>
	<tbody>
      <tr ng-repeat="c in info.consumers.active">
          <td>
              {{c.name}}
          </td>
      </tr>
      <tr ng-show="info.consumers.active.length == 0">
          <td>Unable to find Active Consumers</td>
      </tr>
	</tbody>
  </table>

  <h2>Active Consumers Offsets</h2>
  <div ng-repeat="info in info.consumers.active">
    <div ng-include="'views/includes/group.inc.html'">
    </div>
  </div>
  <div ng-show="info.consumers.active.length == 0">
    Unable to find Active Consumers
  </div>

  <hr/>

  <h2>Inactive Consumers Offsets</h2>
  <div ng-repeat="info in info.consumers.inactive">
    <div ng-include="'views/includes/group.inc.html'">
    </div>
  </div>
  <div ng-show="info.consumers.inactive.length == 0">
    Unable to find Inactive Consumers
  </div>
  
  <hr/>

</div>
